<!--
/**
 * 学习课程 列表页 JS 脚本
 * @author 金杰 , maillank@qq.com
 * @since 2024-09-18 16:56:41
 */
 -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8"/>
    <meta name="referrer" content="no-referrer">
    <title th:text="${lang.translate('试卷')}">试卷</title>
    <link th:if(theme.ico!="null") rel="shortcut icon" th:href="${theme.ico}" type="image/vnd.microsoft.icon">
    <link th:if(theme.ico!="null") rel="icon" th:href="${theme.ico}" type="image/vnd.microsoft.icon">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" th:href="'/assets/libs/layui/css/layui.css?'+${cacheKey}"/>
    <link rel="stylesheet" href="/assets/css/admin.css" th:href="'/assets/css/admin.css?'+${cacheKey}"/>
    <link rel="stylesheet" href="/assets/libs/toast/css/toast.css" type="text/css" th:href="'/assets/libs/toast/css/toast.css?'+${cacheKey}">
    <link rel="stylesheet" href="/assets/css/foxnic-web.css" th:href="'/assets/css/foxnic-web.css?'+${cacheKey}">
    <link href="/assets/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/assets/libs/material-design-webfont/css/material-design-icons-min.css" rel="stylesheet">
    <script th:inline="javascript">var foxnic_cachekey=[[${cacheKey}]];</script>
    <style>
        .top-container {
            display: -webkit-flex; /* Safari */
            display: flex;
            width: 100%;
            align-items:top;
        }
        .left-tree {
            overflow:scroll;
            width:300px;
            /*height:850px!important;*/
            background-color: #ffffff;
            border-right: 1px #e6e6e6 solid;
        }
        .right-tab {
            flex:1;
        }
        .question{
            margin-left:40px;
            /*display: flex;*/
            /*background-color: red;*/
            width: 250px;
            flex-direction: row;
            juestify-content:center;
            align-items: center;
            flex-wrap: wrap;
        }
        .box{
            /*text-align: center;*/
        }
        .btn-white{
            background-color: #c3c3c3!important;
        }
        .btn-error{
            background-color: red!important;
        }
        .btn-sel{
            background-color: #6495EC!important;
        }
        .btn-green{
            background-color: #5EB878!important;
        }
        .qList{
            margin-top: 15px;
        }
        .title{
            font-size: 16px;
            margin-left:38px;
            padding-top: 5px;
            padding-bottom: 5px;
            font-weight: bold;
        }
        .qTitleNumber{
            font-weight: bold;
            font-size: 20px;
        }
        .qTitle{
            width: 80%;
        }
        .qTitleValue{
            width: 80%;
            font-weight: bold;
            font-size: 18px;
        }
        .qCt{
            width: 80%;
            margin-top:25px;
            margin-left:25px;
        }
        .qCtItem{
            width: 60%;
            margin-top:12px;
            font-size: 17px;
        }
        .btn{
            width:40px;
            margin-top:5px;
            margin-bottom:5px;
            padding-bottom:5px!important;
            padding-left:12px!important;
            padding-right:12px!important;
            margin-left:0px!important;
        }
        .q{
            overflow:scroll!important;
            height:450px;
        }
        .banner{
            margin-top:34px;
            margin-bottom:20px;
            margin-left:1px;
            width: 450px;
            flex-direction: column;
            juestify-content:flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        .answerInfo{
            margin-top:20px;
            font-size: 18px;
            font-weight: bold;
        }
        .answerValue{
            font-size: 17px;
            color: blue;
        }
        .qAnswer{
            margin-top:30px;
        }
        .paperTitle{
            justify-content:center;
            display: flex;
            flex-direction: column;
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
        .btns{
            margin-left:20px;
            margin-top:20px;
            text-align: center;
        }
    </style>
    <link th:each="css:${theme.css}" rel="stylesheet" th:href="${css}+'?'+${cacheKey}">
</head>
<script type="text/javascript" src="/module/global.js" th:src="'/module/global.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/jquery-3.2.1.min.js" th:src="'/assets/libs/jquery-3.2.1.min.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/pandyle.min.js" th:src="'/assets/libs/pandyle.min.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/layui/layui.js" th:src="'/assets/libs/layui/layui.js?'+${cacheKey}"></script>
<script type="text/javascript" src="/assets/libs/toast/js/toast.js" th:src="'/assets/libs/toast/js/toast.js?'+${cacheKey}"></script>
<body style="background-color: white!important;">

<div style="padding-top:100px;padding-bottom:100px;margin-left:200px;font-size: 32px" id="msg"></div>

<div class="paperTitle">
    <span id="paperTitle" style="padding-bottom:5px;padding-top:15px;text-align: center;font-size: 23px;font-weight: bold"></span>
    <span id="paperSubTitle" style="padding-bottom:16px;padding-top:5px;text-align: center;font-size: 20px;"></span>
    <span id="paperActing" style="padding-bottom:16px;padding-top:5px;text-align: center;font-size: 15px;"></span>
    <hr style="padding: 0px;margin: 0px;"></hr>
</div>

<div class="top-container" id="container" style="background-color: white">
    <div class="left-tree" id="left-tree" >
        <div class="btns" id="btns">

        </div>
        <div id="qList" class="qList"></div>
    </div>
    <div class="right-tab" style="margin-left: 8px;margin-right: 8px">
        <div style="margin-top:20px;margin-left:50px;">
            <div class="banner">
                <button class="layui-btn " onclick="nav('previous')">上一题</button>
                <button class="layui-btn " onclick="nav('next')">下一题</button>
                <button id="paperFinish" style="margin-left:50px" class="layui-btn " onclick="finish()">交卷</button>
            </div>
            <div class="q">
                <div class="qTitle">
                    <span id="qTitleNumber" class="qTitleNumber">
                    </span>
                    <span id="qTitleValue" class="qTitleValue">
                  </span></div>
                <div id="qCt" class="qCt">
                </div>
            </div>
            <div class="toAnswer" id="answer">
               <span style="font-weight: bold;font-size: 17px">请选择答案:</span>
                <div style="margin-top:15px;">
                    <div class="layui-form" id="answerContent">
                    </div>
                    <div class="layui-form" id="answerContent3">
                     </div>
                </div>
            </div>
            <div class="qAnswer" id="answerResult">
                <div class="answerCt">
                    <span class="answerInfo">正确答案:</span>
                    <span id="answerValue" class="answerValue"></span>
                </div>
                <div class="answerCt">
                    <span class="answerInfo">题目难度:</span>
                    <span id="questionLevel" class="answerValue"></span>
                </div>
                <div class="answerCt">
                    <span class="answerInfo">题目解析:</span>
                    <span id="questionAnalysis" class="answerValue">
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">
    var AUTH_PREFIX="hr_paper_view";
    var result=[[${result}]];
    var msg=[[${msg}]];
    var role=[[${role}]];
    var taskData=[[${taskData}]];
    var taskId=[[${taskId}]];
    var paperData=[[${paperData}]];
    var questionList=paperData.questionList;
    var curIndex=1;
</script>
<script>
    function formatDate(dateStr) {
        // 创建一个 Date 对象
        const date = new Date(dateStr);

        // 获取日期和时间部分
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        // 格式化后的日期字符串
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    function formatDate2(date) {
        // 创建一个 Date 对象
        // 获取日期和时间部分
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');

        // 格式化后的日期字符串
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    function minutesBetweenDates(timestamp1, timestamp2) {
        // 将日期转换为时间戳


        // 计算两个时间戳之间的差值（毫秒）
        var difference = timestamp1 - timestamp2;

        // 将差值转换为分钟数
        var minutesDifference = Math.floor(difference / 1000 / 60);

        return minutesDifference;
    }
    var acting=false;

    function actingTime(){
        if(taskData&&taskData.paperStatus&&taskData.paperStatus=="acting"){
            var st=taskData.startTime;
            var pc=paperData.paperCost;
            var sdate = new Date(st);
            sdate.setMinutes(sdate.getMinutes() + pc);
            var sdateStr = formatDate(sdate);
            var diff=minutesBetweenDates(sdate.getTime(),new Date().getTime());
            var diffStr=""
            if(diff>0){
                diffStr="剩余"+diff+"分";
            }else{
                diffStr="答题时间到,请提交";
            }
            $("#paperActing").html("考试结束时间:"+sdateStr+"  ,  "+diffStr+"!");
            if(!acting){
                setInterval(function() {
                    acting=true;
                    var diff=minutesBetweenDates(sdate.getTime(),new Date().getTime());
                    var diffStr=""
                    if(diff>0){
                        diffStr="剩余"+diff+"分";
                    }else{
                        diffStr="答题时间到,请提交";
                    }

                    $("#paperActing").html("考试结束时间:"+sdateStr+"  ,  "+diffStr+"!");
                }, 30000);
            }

        }
    }
    //answerResult  正确答案
    //answer        用户选择
    //paperFinish   提交
    var h=window.screen.height;
    $("#left-tree").height(h-300);
    if(role=="review"){
        var btnsHtml=" <button class=\" layui-btn layui-btn-xs btn-white\">未答</button>\n" +
            "            <button class=\" layui-btn layui-btn-xs btn-green\">已答</button>\n" +
            "            <button class=\" layui-btn layui-btn-xs btn-error\">错误</button>"+
            "            <button class=\" layui-btn layui-btn-xs btn-sel\">选中</button>\n";
        $("#btns").html(btnsHtml);
        $("#paperFinish").remove();
    }else if(role=="task"){
        var btnsHtml=" <button class=\" layui-btn layui-btn-xs btn-white\">未答</button>\n" +
            "            <button class=\" layui-btn layui-btn-xs btn-green\">已答</button>\n" +
            "            <button class=\" layui-btn layui-btn-xs btn-sel\">选中</button>\n";
        $("#btns").html(btnsHtml);
        $("#answerResult").remove();
        actingTime()

    }else if(role=="taskview"){
        var btnsHtml= "            <button class=\" layui-btn layui-btn-xs btn-green\">正确</button>\n" +
            "            <button class=\" layui-btn layui-btn-xs btn-error\">错误</button>"+
              "            <button class=\" layui-btn layui-btn-xs btn-sel\">选中</button>\n";
        $("#btns").html(btnsHtml);
        $("#answerResult").hide();
        $("#paperFinish").remove();
    }

    var moduleURL = "/service-hr/hr-paper";
    function renderQuestion(questionData){
        console.log("questionData",questionData);
        $("#qTitleNumber").html(curIndex+"、");
        var questionNameCt=questionData.questionName+"  ("+questionData.questionScore+"分)"
        if(questionData.questionImageId&&questionData.questionImageId.length>8){
            questionNameCt+='<img src="/service-storage/sys-file/download?id='+questionData.questionImageId+'" style="height: 200px;">';
        }
        $("#qTitleValue").html(questionNameCt);



        if(questionData.questionType=="textarea"){
            var answerData=questionData.answerData;
            $("#qCt").html('<textarea style=\"height:300px\" id="answerTextArea" name="title" lay-verify="required" placeholder="请输入内容" class="layui-input"></textarea>');
            $("#answerContent").html("");
            if(questionData.isAnswer=="yes"||questionData.isRight=="yes"||questionData.isRight=="no"){
                setTimeout(function () {
                    $("#answerTextArea").val(answerData);
                },100);
            }
            $("#answerValue").html("")
            return 0;
        }

        //填充答案
        var answerData=JSON.parse(questionData.answerData);
        var answerHtml='';
        answerHtml+=' <form id="form" class="layui-form" action="">\n' +
            '                    <div class="layui-form-item">\n' +
            '                        <label class="layui-form-label"></label>\n' +
            '                        <div class="layui-input-block">\n';
        //填充题目
        var itemText=JSON.parse(questionData.itemText);
        var itemHtml="";
        for(var i=0;i<itemText.length;i++){
            var obj=itemText[i];
            itemHtml+=' <div class="qCtItem"><span style="margin-right: 5px;">'+obj.code+'</span><span>'+obj.item+'</span></div>'
            //答案问题
            var checked="";
            if(questionData.isAnswer=="yes"||questionData.isRight=="yes"||questionData.isRight=="no"){
                if(questionData.questionType=="radio"
                    ||questionData.questionType=="choice"
                    ||questionData.questionType=="judge"){
                    for(var j=0;j<answerData.length;j++){
                        if(answerData[j]==obj.id){
                            checked="checked";
                            break;
                        }
                    }
                }
            }
            answerHtml+= '  <input type="checkbox" name="'+obj.id+'" title="'+obj.code+'" '+checked+' >\n' ;
        }
        answerHtml+='     </div>\n' +
        '                    </div>\n' +
        '                    </form>';
        $("#qCt").html(itemHtml);


        //填充正确答案
        if(role=="review"||role=="taskview"){
            if(role=="review"){
                $("#answer").hide();
            }
            rightValue="不显示"
            if(questionData.isRight=="yes"||questionData.isRight=="no"||role=="review"){
                $("#answerResult").show();
                var rightValue="";
                var arrRightValue=JSON.parse(questionData.itemAnswerTextRight);
                for(var i=0;i<arrRightValue.length;i++){
                    if(i==0){
                        rightValue=arrRightValue[i].code;
                    }else{
                        rightValue=rightValue+"、"+arrRightValue[i].code;
                    }
                }
            }
            $("#questionLevel").html(questionData.questionLevelName);
            $("#questionAnalysis").html(questionData.questionAnalysis);
            $("#answerValue").html(rightValue)
            $("#answerContent").html(answerHtml);
        }

        //填充用户答案
        if(role=="task"||role=="taskview"){
            $("#answerContent").html(answerHtml);
        }
        var form = layui.form;
        form.render();
    }
    function getQuestion(id){
        admin.post(moduleURL+"/get-paper-question", { id : id,taskId,taskId }, function (r) {
            if (r.success) {
                renderQuestion(r.data)
            } else {
               alert(r.message);
            }
        });
    }
    function changeIndexDo(sourceIdx,targetIdx){
        admin.post(moduleURL+"/get-paper-question", { id : questionList[sourceIdx-1].id, taskId:taskId }, function (r) {
            if (r.success) {
                getQuestion(questionList[targetIdx-1].id)
                //处理target
                $("#"+questionList[targetIdx-1].id).removeClass("btn-white"); //未答题
                $("#"+questionList[targetIdx-1].id).removeClass("btn-green");  //答题
                $("#"+questionList[targetIdx-1].id).removeClass("btn-sel");
                $("#"+questionList[targetIdx-1].id).removeClass("btn-error");
                $("#"+questionList[targetIdx-1].id).addClass("btn-sel");
                //处理source
                $("#"+questionList[sourceIdx-1].id).removeClass("btn-sel");
                if(role=="review"){
                    $("#"+questionList[sourceIdx-1].id).addClass("btn-white");
                }else if(role=="task"){
                    if(r.data.isAnswer=="yes"){
                        $("#"+questionList[sourceIdx-1].id).addClass("btn-green");
                    }else if(r.data.isAnswer=="no"){
                        $("#"+questionList[sourceIdx-1].id).addClass("btn-white");
                    }
                }else if(role=="taskview"){
                    if(r.data.isRight=="yes"||r.data.isRight=="no"){
                        //已批卷
                        if(r.data.isRight=="yes"){
                            $("#"+questionList[sourceIdx-1].id).addClass("btn-green");
                        }else if(r.data.isRight=="no"){
                            $("#"+questionList[sourceIdx-1].id).addClass("btn-error");
                        }
                    }else{
                        //未批卷
                        if(r.data.isAnswer=="yes"){
                            $("#"+questionList[sourceIdx-1].id).addClass("btn-green");
                        }else if(r.data.isAnswer=="no"){
                            $("#"+questionList[sourceIdx-1].id).addClass("btn-white");
                        }
                    }
                }
                curIndex=targetIdx;
            } else {
                alert(r.message);
            }
        });
    }
   function changeIndex(sourceIdx,targetIdx){
        if(sourceIdx==targetIdx){
            return 0;
        }
        //当前的答案
       if(role=="review"||role=="taskview"){
           changeIndexDo(sourceIdx,targetIdx);
       }else if(role=="task"){
           //做题模式
           var valueStr="";

          if($("#answerTextArea").length>0){
              valueStr=$("#answerTextArea").val();
          }else{
              var answer=[];
              $('input[type="checkbox"]:checked').each(function(i){
                  var boxId=$(this).attr("name");
                  answer.push(boxId);
              });
              valueStr=JSON.stringify(answer);
          }


           admin.post(moduleURL+"/answer", { taskId:taskId,questionRelId:questionList[sourceIdx-1].id,value: valueStr}, function (r) {
               if (r.success) {
                   changeIndexDo(sourceIdx,targetIdx);
               }else{
                   alert(r.message);
               }
           });
       }else{
           alert("swith error");
       }
   }
    function questionSelClick(questionId,selIdx){
        if(selIdx==curIndex){
            console.log("none")
        }else{
            changeIndex(curIndex,selIdx)
        }
    }

    function finish(){
        var answer=[];
        $('input[type="checkbox"]:checked').each(function(i){
            var boxId=$(this).attr("name");
            answer.push(boxId);
        });
        admin.post(moduleURL+"/answer", { taskId:taskId,questionRelId:questionList[curIndex-1].id,value:JSON.stringify(answer) }, function (r) {
            if (r.success||r.code=="100") {
                //结束页面先上传当前题目答案
                admin.post(moduleURL+"/finish", { taskId : taskId }, function (r2) {
                    if (r2.success) {
                        alert(r2.message);
                    } else {
                        alert(r2.message);
                    }
                });
            }else{
                alert(r.message);
            }
        });

    }
    function nav(type){
        actingTime();
        if(type=="previous"){
            if(curIndex==1){
                alert("前面没有题目");
                return 0;
            }
            changeIndex(curIndex,curIndex-1)
        }else if(type=="next"){
            if(curIndex==questionList.length){
                alert("后面没有题目");
                return 0;
            }
            changeIndex(curIndex,curIndex+1)
        }
    }
    if(result){
        $("#msg").remove();
        $("#paperTitle").html(paperData.paperName);
        $("#paperSubTitle").html("考试时间"+paperData.paperCost+"分钟")
        var questionType=paperData.questionType;
        var html="";
        for(var i=0;i<questionType.length;i++){
            if(questionType[i]=="judge"){
                var judge=paperData.judge;
                if(judge.length>0){
                    html+='<div class="title">判断题</div>';
                    html+='<div class="question">';
                    for(var j=0;j<judge.length;j++){
                        var answerd=""
                        if(judge[j].questionNumber==1){
                            answerd="btn-sel"
                        }else{
                            if(judge[j].isRight=="yes"||judge[j].isRight=="no"){
                                console.log("match")
                                if(judge[j].isRight=="yes"){
                                    answerd="btn-green"
                                }else{
                                    answerd="btn-error"
                                }
                            }else{
                                if(judge[j].isAnswer=="no"){
                                    answerd="btn-white"
                                }else if(judge[j].isAnswer=="yes"){
                                    answerd="btn-green"
                                }
                            }
                        }
                        html+=' <button id="'+judge[j].id+'" onclick="questionSelClick(\''+judge[j].id+'\','+judge[j].questionNumber+')" class="btn layui-btn layui-btn-xs '+answerd+' ">'+judge[j].questionNumber+'</button>';
                    }
                    html+='</div>';
                }
            }else if(questionType[i]=="radio"){
                var radio=paperData.radio;
                if(radio.length>0){
                    html+='<div class="title">单选题</div>';
                    html+='<div class="question">';
                    for(var j=0;j<radio.length;j++){
                        var answerd=""
                        if(radio[j].questionNumber==1){
                            answerd="btn-sel"
                        }else{
                            if(radio[j].isRight=="yes"||radio[j].isRight=="no"){
                                if(radio[j].isRight=="yes"){
                                    answerd="btn-green"
                                }else{
                                    answerd="btn-error"
                                }
                            }else{
                                if(radio[j].isAnswer=="no"){
                                    answerd="btn-white"
                                }else if(radio[j].isAnswer=="yes"){
                                    answerd="btn-green"
                                }
                            }
                        }
                        html+=' <button id="'+radio[j].id+'" onclick="questionSelClick(\''+radio[j].id+'\','+radio[j].questionNumber+')" class="btn layui-btn layui-btn-xs '+answerd+' ">'+radio[j].questionNumber+'</button>';
                    }
                    html+='</div>';
                }
            }else if(questionType[i]=="choice"){
                var choice=paperData.choice;
                if(choice.length>0){
                    html+='<div class="title">多选题</div>';
                    html+='<div class="question">';
                    for(var j=0;j<choice.length;j++){
                        var answerd=""
                        if(choice[j].questionNumber==1){
                            answerd="btn-sel"
                        }else{
                            if(choice[j].isRight=="yes"||choice[j].isRight=="no"){
                                if(choice[j].isRight=="yes"){
                                    answerd="btn-green"
                                }else{
                                    answerd="btn-error"
                                }
                            }else{
                                if(choice[j].isAnswer=="no"){
                                    answerd="btn-white"
                                }else if(choice[j].isAnswer=="yes"){
                                    answerd="btn-green"
                                }
                            }
                        }
                        html+=' <button id="'+choice[j].id+'" onclick="questionSelClick(\''+choice[j].id+'\','+choice[j].questionNumber+')" class="btn layui-btn layui-btn-xs '+answerd+' ">'+choice[j].questionNumber+'</button>';
                    }
                    html+='</div>';
                }
            }else if(questionType[i]=="textarea"){
                var textarea=paperData.textarea;
                if(textarea.length>0){
                    html+='<div class="title">填空题</div>';
                    html+='<div class="question">';
                    for(var j=0;j<textarea.length;j++){
                        var answerd=""
                        if(textarea[j].questionNumber==1){
                            answerd="btn-sel"
                        }else{
                            if(textarea[j].isRight=="yes"||textarea[j].isRight=="no"){
                                if(textarea[j].isRight=="yes"){
                                    answerd="btn-green"
                                }else{
                                    answerd="btn-error"
                                }
                            }else{
                                if(textarea[j].isAnswer=="no"){
                                    answerd="btn-white"
                                }else if(textarea[j].isAnswer=="yes"){
                                    answerd="btn-green"
                                }
                            }
                        }
                        html+=' <button id="'+textarea[j].id+'" onclick="questionSelClick(\''+textarea[j].id+'\','+textarea[j].questionNumber+')" class="btn layui-btn layui-btn-xs '+answerd+' ">'+textarea[j].questionNumber+'</button>';
                    }
                    html+='</div>';
                }
            }
            $("#qList").html(html);
        }
        var questionRelId=paperData.questionList[curIndex-1].id;
        setTimeout(function (){
            getQuestion(questionRelId);
        },1200)
    }else{
        $("#container").remove();
        $("#msg").html(msg);
    }
</script>
<script th:src="'/business/hr/paper/paper_do_ext.js?'+${cacheKey}"></script>
<script th:src="'/business/hr/paper/paper_do.js?'+${cacheKey}"></script>
</body>
</html>